<template>
   <div class='header-box'>
        <el-row>
            <el-col :span="3">
                <div class="left-header" @click="goHome">
                    {{headerTitle}}
                </div>
                
                </el-col>
            <el-col :span="19">
                <el-menu
                    v-if="menuHeaderType==='double'"
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    background-color="#001529"
                     text-color="#fff"
                     active-text-color="#d9393b"
                    @select="handleSelect"
                >
                     <el-menu-item :index="item.key" v-for="item in menuData" :key="item.key">{{item.name}}</el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="2">
                <p class="right">
                    <span class="username">{{username}}</span>
                    <span class="out" @click="out">退出</span>
                </p>
                
            </el-col>
        </el-row>
   </div>
</template>
<script>
import {ref, reactive,onMounted,toRefs,watch} from 'vue'
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
    name:'menu-header',
    setup() {
        const router = useRouter();
        const $store = useStore();
        const headerTitle = ref($store.state.title)
        const user = reactive($store.getters.getUserInfo)
        const state = reactive({
            menuData:[],// 菜单渲染
            menuHeaderType:$store.state.menuType// 菜单类型，单菜单 / 双菜单
        })
        const activeIndex = ref($store.getters.getHeaderActive.key?$store.getters.getHeaderActive.key:'1')
        onMounted(()=>{
            if(state.menuHeaderType ==='double'){
                let menuArr = $store.getters.getMenu
                let arr = []
                for(var i =0;i<menuArr.length;i++){
                    if(!menuArr[i].parentId){
                        arr.push(menuArr[i])
                    }
                }
                console.log(activeIndex)
                activeIndex=='1'? $store.commit('setHeaderActive', arr[0]):$store.commit('setHeaderActive', $store.getters.getHeaderActive)
                state.menuData =arr
            }
        })
        watch(() => $store.state.headerActive, (val, old) => {
            // activeIndex.value = val.key
        })
        const handleSelect = (key) => {
            let data = state.menuData
            let curIndex = data.filter(item=> item.key ==key)[0]
            $store.commit('setHeaderActive', curIndex)
        }
        const goHome = ()=>{
            router.push({path: 'main'})
        }
        const out = () =>{
            router.push({path: '/login'})
            $store.commit('setClearStore')
        }
        return{
            ...toRefs(state),
             ...toRefs(user),
            headerTitle,
            activeIndex,
            handleSelect,
            goHome,
            out
        }
    }
}
</script>
<style lang="scss" scoped>
.header-box{
    background:#001529;
     height: 100%;
}
.left-header{
   line-height: 60px;
   font-size: 24px;
   text-align: center;
   color: cornsilk;
}
.right{
    color:cornsilk;
    margin: 0!important;
    line-height: 60px;
    .username{
        margin-right:5%;
    }
}
</style>